<template>
  <div>账单</div>
</template>

<script lang="tsx">
import { defineComponent, ref, h } from 'vue';
import { ElMessage, formItemProps } from 'element-plus';
import { Download, Eye } from '@vben/icons';
import { usePage } from '#/hooks/page/usePage';

export default defineComponent({
  name: 'Bill',
  setup() {
    // 模拟API函数
    const getBillListApi = async (params: any) => {
      console.log('获取账单列表', params);

      // 模拟数据
      const mockData = Array.from({ length: 10 }, (_, index) => {
        if (index === 0) {
          // 合计行
          return {
            id: 'total',
            isTotal: true,
            transactionId: '-',
            orderNumber: '-',
            productName: '-',
            amount: '51299.00',
            status: '-',
            payTime: '2025-05-23 00:00:00~2025-05-23 15:00:00'
          };
        }

        // 普通数据行
        const amounts = ['9.99', '19.99', '6.18', '12.12', '599.00', '599.00', '599.00', '599.00', '599.00'];
        const statuses = ['paid', 'paid', 'paid', 'paid', 'paid', 'paid', 'refunded', 'refunded', 'refunded'];

        return {
          id: index,
          isTotal: false,
          transactionId: '2025090912',
          orderNumber: '2025090912',
          productName: '通用数字主线认证',
          amount: amounts[index - 1] || '599.00',
          status: statuses[index - 1] || 'paid',
          payTime: '2025-05-23 12:00:09'
        };
      });

      return {
        data: mockData,
        pageInfo: {
          totalRows: 800
        }
      };
    };

    // API配置
    const API = {
      get: getBillListApi
    };

    // 获取状态颜色和文本
    const getStatusInfo = (status: string) => {
      const statusMap: Record<string, { color: string; text: string }> = {
        paid: { color: 'bg-green-500', text: '已支付' },
        refunded: { color: 'bg-gray-500', text: '已退款' },
        pending: { color: 'bg-orange-500', text: '待支付' },
        failed: { color: 'bg-red-500', text: '支付失败' }
      };
      return statusMap[status] || { color: 'bg-gray-500', text: '未知' };
    };

    // 表格列配置
    const columns = [
      {
        prop: 'transactionId',
        label: '交易号',
        minWidth: 150,
        showOverflowTooltip: true,
        formatter: (row: any) => {
          if (row.isTotal) {
            return <span class="font-semibold text-gray-700">合计</span>;
          }
          return row.transactionId;
        }
      },
      {
        prop: 'orderNumber',
        label: '订单编号',
        minWidth: 150,
        showOverflowTooltip: true
      },
      {
        prop: 'productName',
        label: '产品名称',
        minWidth: 180,
        showOverflowTooltip: true
      },
      {
        prop: 'amount',
        label: '账单金额',
        minWidth: 120
      },
      {
        prop: 'status',
        label: '账单状态',
        minWidth: 120,
        formatter: (row: any) => {
          if (row.isTotal) {
            return row.status;
          }
          const statusInfo = getStatusInfo(row.status);
          return (
            <div class="flex items-center">
              <div class={`w-2 h-2 rounded-full mr-2 ${statusInfo.color}`}></div>
              <span>{statusInfo.text}</span>
            </div>
          );
        }
      },
      {
        prop: 'payTime',
        label: '支付时间',
        minWidth: 200,
        showOverflowTooltip: true
      }
    ];

    // 查询配置
    const queryColumns = [
      {
        prop: 'transactionId',
        label: '交易号',
        type: 'input',
        placeholder: '请输入',
      },
      {
        prop: 'orderNumber',
        label: '订单编号',
        type: 'input',
        placeholder: '请输入',
      },
      {
        prop: 'productName',
        label: '产品名称',
        type: 'input',
        placeholder: '请输入',
      },
      {
        prop: 'amount',
        label: '账单金额',
        type: 'input',
        placeholder: '请输入',
      },
      {
        prop: 'status',
        label: '账单状态',
        type: 'select',
        placeholder: '请选择',
        options: [
          { label: '全部', value: '' },
          { label: '已支付', value: 'paid' },
          { label: '已退款', value: 'refunded' },
          { label: '待支付', value: 'pending' },
          { label: '支付失败', value: 'failed' }
        ],
      },
      {
        prop: 'payTimeRange',
        label: '支付时间',
        type: 'daterange',
        placeholder: ['开始时间', '结束时间'],
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        format: 'YYYY-MM-DD HH:mm:ss',
        formItemProps: {
          style: {
            width: '100%'
          }
        }
      },
      {
        prop: 'billPeriod',
        label: '账单区间',
        type: 'select',
        placeholder: '请选择',
        options: [
          { label: '今天', value: 'today' },
          { label: '昨天', value: 'yesterday' },
          { label: '本周', value: 'thisWeek' },
          { label: '本月', value: 'thisMonth' },
          { label: '自定义', value: 'custom' }
        ],
      },

    ];

    // 自定义操作处理
    const handleCommand = (type: string, data?: any, index?: number) => {
      if (type === 'view') {
        console.log('查看账单详情', data);
        ElMessage.info('查看账单详情');
      }
    };

    const { render, tableHandle, getTableData } = usePage({
      API,
      operateProps: {
        fixed: 'right',
      },
      columns,
      queryColumns,
      commands: [],
      handleCommand,
      prefix: () => <el-table-column type="selection" width="45" />
    });

    // 下载功能
    const handleDownload = () => {
      ElMessage.success('开始下载账单数据');
    };

    return () => (
      <div class="h-full">
        {render({
          header: (<el-button type="primary" onClick={handleDownload}>下载</el-button>)
        })}
      </div>
    );
  }
});
</script>

<style scoped lang="scss"></style>
